<template>
  <div>
    <!--左侧树形菜单-->
    <!-- <el-tree :data="data"
                  :props="defaultProps"
                  default-expand-all
                  @node-click="handleNodeClick">
        </el-tree> -->
    <el-scrollbar>
    <el-menu
      :unique-opened="true"
      class="el-menu-vertical-demo"
      background-color="#4a6c8c"
      text-color="#fff"
      active-text-color="#fc5531"
    >
      <el-submenu
        :index="treeNode.menuId + ''"
        :key="treeNode.menuId"
        v-for="treeNode in data"
      >
        <template slot="title">
          <i :class=treeNode.icon></i>
          <span>{{ treeNode.menuName }}</span>
        </template>
        <el-menu-item
          :index="sub.parentId + ''"
          :key="sub.parentId"
          v-for="sub in treeNode.children"
        >
          <i :class="sub.icon"></i>
          <span slot="title"
            ><a
              style="color: white; text-decoration: none"
              @click="handleNodeClick(sub)"
              >{{ sub.menuName }}</a
            ></span
          >
        </el-menu-item>
      </el-submenu>
    </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      //el-tree 的数据
      data: [],
      defaultProps: {
        children: "children",
        menuName: "menuName",
      },
    };
  },
  created: function () {
    //让_this等于当前vue对象
    var _this = this;
    // alert(111);
    //复制 axios官网代码
    // var token  = localStorage.getItem("token");
    //alert(token);
    //初始化查询左侧树
    this.$http
      .get("/menu/queryByUserName") //指定请求的url及参数  get
      .then(function (response) {
        //正确返回对象的处理
        //JSON.stringify   把json转换为json字符串，方便查看
        console.log(JSON.stringify(response));
        //直接使用this 会指 axios对象  错误
        // this.tableData
        //判断返回值是否正确
        if (response.data.code == 200) {
          //alert(JSON.stringify(response.data.data));
          _this.data = response.data.data;
        }
      });
  },
  methods: {
    //绑定点击事件
    handleNodeClick(data) {
      console.log(data);
      console.log(JSON.stringify(data));
      if (
        data.url != null &&
        data.url != "" &&
        data.url != "null" &&
        data.url != "undefined"
      ) {
        //当点击左侧菜单时，添加页签
        //alert(data.label+','+data.url);
        //编程式路由
        this.$router.push(data.url);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
